<template>
  <div class="w-card content-box">
    <div class="title-box">
      <span class="title">号卡商品资料</span>
      <el-button v-show="!isEdit" style="margin-left:auto;" plain @click="toEditGoods">编辑</el-button>
      <el-button v-show="isEdit" style="margin-left:auto;" plain @click="toDetailGoods">取消</el-button>
      <el-button v-show="isEdit" type="primary" @click="postHandle">发布</el-button>
    </div>
    <div v-if="!isEdit">
      <div class="f-title" style="margin-top: 20px;">基本信息</div>
      <el-row class="padx20 info-box" :gutter="20" style="margin-top: 10px;">
        <el-col :span="6">
          <span>标题：</span>
          <div class="flcl">
            <span v-for="item in setNewLine(goodsForm.title)" :key="item">{{ item || '' }}</span>
          </div>
        </el-col>
        <el-col :span="6">
          <span>产品套餐：</span>
          <div class="flcl">
            <span v-for="item in setNewLine(goodsForm.product)" :key="item">{{ item || '' }}</span>
          </div>
        </el-col>
      </el-row>
      <el-row class="padx20 info-box" :gutter="20" style="margin-top: 10px;">
        <el-col :span="6">
          <span>套餐内容：</span>
          <div class="flcl">
            <span v-for="item in setNewLine(goodsForm.productInfo)" :key="item">{{ item || '' }}</span>
          </div>
        </el-col>
      </el-row>
      <div class="f-title" style="margin-top: 20px;">优惠详情</div>
      <el-row class="padxy20" style="padding-bottom: 0;">
        <el-col :span="12">
          <div class="back-box padxy20">
            <div>
              <div class="flcl">
                <span v-for="item in setNewLine(goodsForm.yhxx)" :key="item">{{ item || '' }}</span>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
      <div class="f-title" style="margin-top: 20px;">快递方式</div>
      <el-row class="padxy20" style="padding-bottom: 0;">
        <el-col :span="12">
          <div class="back-box padxy20">
            <div>
              <div class="flcl">
                <span v-for="item in setNewLine(goodsForm.kdfs)" :key="item">{{ item || '' }}</span>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
      <div class="f-title" style="margin-top: 20px;">激活方式</div>
      <el-row class="padxy20" style="padding-bottom: 0;">
        <el-col :span="12">
          <div class="back-box padxy20">
            <div>
              <div class="flcl">
                <span v-for="item in setNewLine(goodsForm.jhfs)" :key="item">{{ item || '' }}</span>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
      <div class="f-title" style="margin-top: 20px;">充值链接</div>
      <el-row class="padxy20" style="padding-bottom: 0;">
        <el-col :span="12">
          <div class="back-box padxy20">
            <div>
              <div class="flcl">
                <span v-for="item in setNewLine(goodsForm.czlj)" :key="item">{{ item || '' }}</span>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
      <div class="f-title" style="margin-top: 20px;">办卡年龄</div>
      <el-row class="padxy20" style="padding-bottom: 0;">
        <el-col :span="12">
          <div class="back-box padxy20">
            <div>
              <div class="flcl">
                <span v-for="item in setNewLine(goodsForm.bknl)" :key="item">{{ item || '' }}</span>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
      <div class="f-title" style="margin-top: 20px;">合约期</div>
      <el-row class="padxy20" style="padding-bottom: 0;">
        <el-col :span="12">
          <div class="back-box padxy20">
            <div>
              <div class="flcl">
                <span v-for="item in setNewLine(goodsForm.hyq)" :key="item">{{ item || '' }}</span>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
      <div class="f-title" style="margin-top: 20px;">不发货地区</div>
      <el-row class="padxy20" style="padding-bottom: 0;">
        <el-col :span="12">
          <div class="back-box padxy20">
            <div>
              <div class="flcl">
                <span v-for="item in setNewLine(goodsForm.bfhdq)" :key="item">{{ item || '' }}</span>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
      <div class="f-title" style="margin-top: 20px;">定向范围</div>
      <el-row class="padxy20" style="padding-bottom: 0;">
        <el-col :span="12">
          <div class="back-box padxy20">
            <div>
              <div class="flcl">
                <span v-for="item in setNewLine(goodsForm.dxfw)" :key="item">{{ item || '' }}</span>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
      <div class="f-title" style="margin-top: 20px;">激活流程图</div>
      <el-row class="padxy20" style="padding-bottom: 0;">
        <el-col :span="12">
          <span style="color: #7F7F7F;font-size: 14px;" v-show="!goodsForm.jhlct">暂无流程图</span>
          <img style="max-width: 100%;" v-show="goodsForm.jhlct" :src="goodsForm.jhlct" alt="">
        </el-col>
      </el-row>
      <div class="f-title" style="margin-top: 20px;">温馨提示</div>
      <el-row class="padxy20" style="padding-bottom: 0;">
        <el-col :span="12">
          <div class="back-box padxy20">
            <div>
              <div class="flcl">
                <span v-for="item in setNewLine(goodsForm.wxts)" :key="item">{{ item || '' }}</span>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
      <div class="f-title" style="margin-top: 20px;">复机及注销方式</div>
      <el-row class="padxy20" style="padding-bottom: 0;">
        <el-col :span="12">
          <div class="back-box padxy20">
            <div>
              <div class="flcl">
                <span v-for="item in setNewLine(goodsForm.fjjzxfs)" :key="item">{{ item || '' }}</span>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div v-if="isEdit">
      <div class="f-title" style="margin-top: 20px;">基本信息</div>
      <el-row class="padx20 info-box" :gutter="20" style="margin-top: 10px;">
        <el-col :span="10">
          <span>标题：</span>
          <el-input v-model="goodsForm.title" :rows="1" type="textarea" placeholder="请输入标题" />
        </el-col>
      </el-row>
      <el-row class="padx20 info-box" :gutter="20" style="margin-top: 10px;">
        <el-col :span="10">
          <span>产品套餐：</span>
          <el-input v-model="goodsForm.product" :rows="2" type="textarea" placeholder="请输入产品套餐" />
        </el-col>
      </el-row>
      <el-row class="padx20 info-box" :gutter="20" style="margin-top: 10px;">
        <el-col :span="10">
          <span>套餐内容：</span>
          <el-input v-model="goodsForm.productInfo" :rows="2" type="textarea" placeholder="请输入套餐内容" />
        </el-col>
      </el-row>
      <div class="f-title" style="margin-top: 20px;">优惠详情</div>
      <el-row class="padxy20" style="padding-bottom: 0;">
        <el-col :span="12">
          <div>
            <el-input v-model="goodsForm.yhxx" :rows="2" type="textarea" placeholder="请输入优惠详情" />
          </div>
        </el-col>
      </el-row>
      <div class="f-title" style="margin-top: 20px;">快递方式</div>
      <el-row class="padxy20" style="padding-bottom: 0;">
        <el-col :span="12">
          <div>
            <el-input v-model="goodsForm.kdfs" :rows="2" type="textarea" placeholder="请输入快递方式" />
          </div>
        </el-col>
      </el-row>
      <div class="f-title" style="margin-top: 20px;">激活方式</div>
      <el-row class="padxy20" style="padding-bottom: 0;">
        <el-col :span="12">
          <div>
            <el-input v-model="goodsForm.jhfs" :rows="2" type="textarea" placeholder="请输入激活方式" />
          </div>
        </el-col>
      </el-row>
      <div class="f-title" style="margin-top: 20px;">充值链接</div>
      <el-row class="padxy20" style="padding-bottom: 0;">
        <el-col :span="12">
          <div>
            <el-input v-model="goodsForm.czlj" :rows="2" type="textarea" placeholder="请输入充值链接" />
          </div>
        </el-col>
      </el-row>
      <div class="f-title" style="margin-top: 20px;">办卡年龄</div>
      <el-row class="padxy20" style="padding-bottom: 0;">
        <el-col :span="12">
          <div>
            <el-input v-model="goodsForm.bknl" :rows="2" type="textarea" placeholder="请输入办卡年龄" />
          </div>
        </el-col>
      </el-row>
      <div class="f-title" style="margin-top: 20px;">合约期</div>
      <el-row class="padxy20" style="padding-bottom: 0;">
        <el-col :span="12">
          <div>
            <el-input v-model="goodsForm.hyq" :rows="2" type="textarea" placeholder="请输入合约期" />
          </div>
        </el-col>
      </el-row>
      <div class="f-title" style="margin-top: 20px;">不发货地区</div>
      <el-row class="padxy20" style="padding-bottom: 0;">
        <el-col :span="12">
          <div>
            <el-input v-model="goodsForm.bfhdq" :rows="2" type="textarea" placeholder="请输入不发货地区" />
          </div>
        </el-col>
      </el-row>
      <div class="f-title" style="margin-top: 20px;">定向范围</div>
      <el-row class="padxy20" style="padding-bottom: 0;">
        <el-col :span="12">
          <div>
            <el-input v-model="goodsForm.dxfw" :rows="2" type="textarea" placeholder="请输入定向范围" />
          </div>
        </el-col>
      </el-row>
      <div class="f-title" style="margin-top: 20px;">激活流程图</div>
      <el-row class="padxy20" style="padding-bottom: 0;">
        <el-col :span="12">
          <div class="padxy20">
            <div v-show="!goodsForm.jhlct" class="upload-box-img" @click="uploadImg">
              <el-icon>
                <Plus />
              </el-icon>
            </div>
            <div class="upload-box" v-show="goodsForm.jhlct">
              <img :src="goodsForm.jhlct" alt="">
              <el-icon color="#ffffff" class="upload-close" @click="removeImg">
                <Close />
              </el-icon>
            </div>
            <input ref="uploadInputRef" style="display:none" type="file" accept="image/*" @change="uploadChange">
          </div>
        </el-col>
      </el-row>
      <div class="f-title" style="margin-top: 20px;">温馨提示</div>
      <el-row class="padxy20" style="padding-bottom: 0;">
        <el-col :span="12">
          <div>
            <el-input v-model="goodsForm.wxts" :rows="2" type="textarea" placeholder="请输入温馨提示" />
          </div>
        </el-col>
      </el-row>
      <div class="f-title" style="margin-top: 20px;">复机及注销方式</div>
      <el-row class="padxy20" style="padding-bottom: 0;">
        <el-col :span="12">
          <div>
            <el-input v-model="goodsForm.fjjzxfs" :rows="2" type="textarea" placeholder="请输入复机及注销方式" />
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { successDeal, warningDeal, getStore, errorDeal } from '@/utils/utils'
import { onMounted, reactive, ref, toRefs } from 'vue'
import api from '../api'
import { useRoute, useRouter } from 'vue-router'
import axios from "axios"
export default {
  setup() {
    const route = useRoute()
    const router = useRouter()

    const uploadInputRef = ref(null)

    const state = reactive({
      goodsId: null,
      isEdit: false,
      goodsForm: {},
    })

    function toEditGoods() {
      state.isEdit = true
    }

    function toDetailGoods() {
      getDetail()
      state.isEdit = false
    }

    function postHandle() {
      const obj = {
        goodsId: state.goodsId,
        ...state.goodsForm,
      }
      api.goodsZiliaoModify(obj).then(res => {
        if (res.code == '200') {
          successDeal(res.msg)
          getDetail()
          state.isEdit = false
        } else {
          warningDeal(res.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    }

    function getDetail() {
      const obj = {
        goodsId: state.goodsId,
      }
      api.goodsZiliaoQry(obj).then(res => {
        if (res.code == '200') {
          state.goodsForm = res.data
        } else {
          warningDeal(res.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    }

    function setNewLine(str) {
      if (!str) return []
      const myArr = str.split('\n')
      return myArr
    }

    function uploadImg() {
      uploadInputRef.value.click()
    }

    //上传文件
    async function uploadChange(e) {
      const fileForm = {}
      fileForm.file = e.target.files[0]
      fileForm.fileName = e.target.files[0].name
      await uploadFile(fileForm)
      uploadInputRef.value.value = ''
    }

    function removeImg() {
      state.goodsForm.jhlct = null
    }

    async function uploadFile(fileForm) {
      let path = null
      let param = new FormData()
      param.append('file', fileForm.file, fileForm.fileName)
      const token = window.localStorage.getItem("USER_TOKEN_INRE") || '';
      const uesrInfo = getStore("USER_INFO_INRE") || {};
      const Authorization = getStore("USER_AUTHOR_INRE") || {
        Authorization: `'','','',3,20,''`,
      };
      let config = {
        headers: {
          'Content-Type': 'multipart/form-data',
          token: token ? `Bearer ${token}` : '',
          username: uesrInfo.username || '',
          Authorization: Authorization.Authorization,
          platformHeadType: 'rcmsPlatform',
        }
      }
      await axios.post('/ums/file/upload/user/pub', param, config).then(res => {
        if (res.data.code == '200') {
          path = res.data.data.ossUrl
        } else {
          errorDeal(res.data, '/ums/file/upload/user/pub')
        }
      }).catch(err => {
        console.log(err)
      })
      state.goodsForm.jhlct = path
    }

    onMounted(() => {
      state.goodsId = route.query.goodsId
      getDetail()
    })

    return {
      ...toRefs(state),
      uploadInputRef,
      toEditGoods,
      postHandle,
      toDetailGoods,
      setNewLine,
      uploadImg,
      uploadChange,
      removeImg,
    }
  }
}
</script>

<style lang="scss" scoped>
.content-box {
  height: 100%;
  overflow: hidden;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 20px;
  .title-box {
    display: flex;
    align-items: center;
    > .title {
      font-size: 16px;
      font-weight: bold;
    }
  }
}
.f-title {
  box-sizing: border-box;
  padding: 10px 0;
  border-bottom: 1px solid #e9e9e9;
  font-size: 14px;
  font-weight: bold;
}
.padx20 {
  box-sizing: border-box;
  padding: 0 20px;
}
.padxy20 {
  box-sizing: border-box;
  padding: 20px;
}
.back-box {
  background-color: #f1f1f1;
  > div {
    font-size: 14px;
  }
  > div:not(:first-of-type) {
    margin-top: 10px;
  }
}
.info-box {
  > .el-col {
    display: flex;
    align-items: flex-start;
    span {
      font-size: 14px;
      flex-shrink: 0;
    }
    > span:last-of-type {
      color: #5a5a5a;
    }
    > .titleText {
      color: #000000 !important;
    }
  }
}
.flcl {
  display: flex;
  flex-flow: column;
}
.upload-box-img {
  width: 80px;
  height: 80px;
  border: 1px dashed #b3b3b5;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.upload-box {
  position: relative;
  > img {
    max-width: 100%;
  }
  .upload-close {
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
    background-color: rgba($color: #000000, $alpha: 0.5);
  }
}
</style>